<template>
  <el-pagination
    class="mt20"
    :current-page="props.pagenum"
    :page-size="props.pagesize"
    :page-sizes="props.pagesizes"
    layout="total, sizes, prev, pager, next, jumper"
    :total="props.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang='ts' setup>
import type { PropType } from 'vue'

const props = defineProps({
  pagenum: {
    type: Number,
    default: 1
  },
  pagesize: {
    type: Number,
    default: 10
  },
  pagesizes: {
    type: Array as PropType<any[]>,
    default: () => [5, 10, 20, 50]
  },
  total: {
    type: Number,
    default: 0
  },
  loadList: {
    type: Function as PropType<(...args: any[]) => void>,
    default: () => {}
  }
})

interface EmitsType {
  (e: 'update: pagenum', a: number): void
  (e: 'update: pagesize', a: number): void
}
const emit = defineEmits<EmitsType>()
const handleSizeChange = (val: number) => {
  emit('update: pagenum', 1)
  emit('update: pagesize', val)
  props.loadList()
}
const handleCurrentChange = (val: number) => {
  emit('update: pagenum', val)
  props.loadList()
}
</script>
<style lang='scss' scoped>
</style>
